<template>
  <div class="brand">
    <img src="@/assets/img/type/banner.jpg" class="banner">
    <div class="brandlist">
      <van-index-bar :index-list="indexList">
        <van-index-anchor index="#">#</van-index-anchor>
        <div class="item" v-for="brand in nullList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="A">A</van-index-anchor>
        <div class="item" v-for="brand in aList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="B">B</van-index-anchor>
        <div class="item" v-for="brand in bList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="C">C</van-index-anchor>
        <div class="item" v-for="brand in cList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="D">D</van-index-anchor>
        <div class="item" v-for="brand in dList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="E">E</van-index-anchor>
        <div class="item" v-for="brand in eList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="F">F</van-index-anchor>
        <div class="item" v-for="brand in fList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="G">G</van-index-anchor>
        <div class="item" v-for="brand in gList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="H">H</van-index-anchor>
        <div class="item" v-for="brand in hList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="I">I</van-index-anchor>
        <div class="item" v-for="brand in iList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="J">J</van-index-anchor>
        <div class="item" v-for="brand in jList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="K">K</van-index-anchor>
        <div class="item" v-for="brand in kList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="L">L</van-index-anchor>
        <div class="item" v-for="brand in lList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="M">M</van-index-anchor>
        <div class="item" v-for="brand in mList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="N">N</van-index-anchor>
        <div class="item" v-for="brand in nList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="O">O</van-index-anchor>
        <div class="item" v-for="brand in oList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="P">P</van-index-anchor>
        <div class="item" v-for="brand in pList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="Q">Q</van-index-anchor>
        <div class="item" v-for="brand in qList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="R">R</van-index-anchor>
        <div class="item" v-for="brand in rList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="S">S</van-index-anchor>
        <div class="item" v-for="brand in sList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="T">T</van-index-anchor>
        <div class="item" v-for="brand in tList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="U">U</van-index-anchor>
        <div class="item" v-for="brand in uList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="V">V</van-index-anchor>
        <div class="item" v-for="brand in vList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="W">W</van-index-anchor>
        <div class="item" v-for="brand in wList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="X">X</van-index-anchor>
        <div class="item" v-for="brand in xList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="Y">Y</van-index-anchor>
        <div class="item" v-for="brand in yList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
        <van-index-anchor index="Z">Z</van-index-anchor>
        <div class="item" v-for="brand in zList" :key="brand.brandId">
          <img :src="brand.imageUrl">
          {{ brand.brandName }}
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BrandType',
  data() {
    return {
      indexList: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      nullList: [],
      aList: [],
      bList: [],
      cList: [],
      dList: [],
      eList: [],
      fList: [],
      gList: [],
      hList: [],
      iList: [],
      jList: [],
      kList: [],
      lList: [],
      mList: [],
      nList: [],
      oList: [],
      pList: [],
      qList: [],
      rList: [],
      sList: [],
      tList: [],
      uList: [],
      vList: [],
      wList: [],
      xList: [],
      yList: [],
      zList: []
    }
  },
  created() {
    this.$apiProxy({
      url: '/brand',
      method: 'get'
    }).then(res => {
      // console.log(res);
      res.data.forEach(item => {
        if (item.firstWord == '#') {
          this.nullList.push(item)
        }
        else if (item.firstWord == 'A') {
          this.aList.push(item)
        }
        else if (item.firstWord == 'B') {
          this.bList.push(item)
        }
        else if (item.firstWord == 'C') {
          this.cList.push(item)
        }
        else if (item.firstWord == 'D') {
          this.dList.push(item)
        }
        else if (item.firstWord == 'E') {
          this.eList.push(item)
        }
        else if (item.firstWord == 'F') {
          this.fList.push(item)
        }
        else if (item.firstWord == 'G') {
          this.gList.push(item)
        }
        else if (item.firstWord == 'H') {
          this.hList.push(item)
        }
        else if (item.firstWord == 'I') {
          this.iList.push(item)
        }
        else if (item.firstWord == 'J') {
          this.jList.push(item)
        }
        else if (item.firstWord == 'K') {
          this.kList.push(item)
        }
        else if (item.firstWord == 'L') {
          this.lList.push(item)
        }
        else if (item.firstWord == 'M') {
          this.mList.push(item)
        }
        else if (item.firstWord == 'N') {
          this.nList.push(item)
        }
        else if (item.firstWord == 'O') {
          this.oList.push(item)
        }
        else if (item.firstWord == 'P') {
          this.pList.push(item)
        }
        else if (item.firstWord == 'Q') {
          this.qList.push(item)
        }
        else if (item.firstWord == 'R') {
          this.rList.push(item)
        }
        else if (item.firstWord == 'S') {
          this.sList.push(item)
        }
        else if (item.firstWord == 'T') {
          this.tList.push(item)
        }
        else if (item.firstWord == 'U') {
          this.uList.push(item)
        }
        else if (item.firstWord == 'V') {
          this.vList.push(item)
        }
        else if (item.firstWord == 'W') {
          this.wList.push(item)
        }
        else if (item.firstWord == 'X') {
          this.xList.push(item)
        }
        else if (item.firstWord == 'Y') {
          this.yList.push(item)
        }
        else if (item.firstWord == 'Z') {
          this.zList.push(item)
        }
      })
    })
  },
}
</script>
 
<style lang="less">
.brand {
  .banner {
    margin-bottom: 12px;
  }

  .brandlist {
    padding: 12px;
    background: #fff;
    padding-right: 0;
    padding-bottom: 60px;

    .van-index-bar {
      position: relative;

      .van-index-bar__sidebar {
        width: 47px;
        right: -6px;
        padding: 6px 12px;

        .van-index-bar__index {
          padding: 0;
          width: 15px;
          height: 15px;
          text-align: center;
          border-radius: 50%;
          line-height: 15px;
          margin-bottom: 1px;
          font-size: 12px;
          color: #333;
        }

        .van-index-bar__index--active {
          background: #f74747;
          border-radius: 50%;
          color: #fff;
        }
      }
    }

    .item {
      font-size: 14px;
      line-height: 35px;
      position: relative;
      padding-left: 129px;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-right: 25px;

      img {
        width: 70px;
        height: 27.5px;
        margin-right: 12px;
        position: absolute;
        left: 47px;
        top: 17.5px;
        background-color: #fff;
      }
    }
  }

}
</style>
